<!DOCTYPE html>
<html lang="en">

<head>
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="css/mystyles.css">
</head>

<body>

    <nav class="navbar is-transparent">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
                <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox"
                    width="112" height="28">
            </a>
            <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <div id="navbarExampleTransparentExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item" href="https://bulma.io/">
                    Home
                </a>
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
                        Docs
                    </a>
                    <div class="navbar-dropdown is-boxed">
                        <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
                            Overview
                        </a>
                        <a class="navbar-item" href="https://bulma.io/documentation/modifiers/syntax/">
                            Modifiers
                        </a>
                        <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
                            Columns
                        </a>
                        <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
                            Layout
                        </a>
                        <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
                            Form
                        </a>
                        <hr class="navbar-divider">
                        <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
                            Elements
                        </a>
                        <a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
                            Components
                        </a>
                    </div>
                </div>
            </div>

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="field is-grouped">
                        <p class="control">
                            <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet"
                                data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=http://localhost:4000&amp;via=jgthms">
                                <span class="icon">
                                    <i class="fab fa-twitter"></i>
                                </span>
                                <span>
                                    Tweet
                                </span>
                            </a>
                        </p>
                        <p class="control">
                            <a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.7.2/bulma-0.7.2.zip">
                                <span class="icon">
                                    <i class="fas fa-download"></i>
                                </span>
                                <span>Download</span>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- navbar 导航 -->
    <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
                <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
            </a>

            <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>

        <div id="navbarBasicExample" class="navbar-menu">
            <div class="navbar-start">
                <a class="navbar-item">
                    Home
                </a>

                <a class="navbar-item">
                    Documentation
                </a>

                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                        More
                    </a>

                    <div class="navbar-dropdown">
                        <a class="navbar-item">
                            IOS
                        </a>
                        <a class="navbar-item">
                            Flutter
                        </a>
                        <a class="navbar-item">
                            Swift
                        </a>
                        <hr class="navbar-divider">
                        <a class="navbar-item">
                            Bulma
                        </a>
                        <a class="navbar-item">
                            Graphql
                        </a>
                        <a class="navbar-item">
                            Now
                        </a>
                    </div>
                </div>

                <div class="navbar-item">
                    <div class="field is-grouped">
                        <p class="control">
                            <a class="button">
                                <span class="icon">
                                    <i class="fas fa-twitter" aria-hidden="true"></i>
                                </span>
                                <span>Tweet</span>
                            </a>
                        </p>
                        <p class="control">
                            <a class="button is-primary">
                                <span class="icon">
                                    <i class="fas fa-download" aria-hidden="true"></i>
                                </span>
                                <span>Download</span>
                            </a>
                        </p>
                    </div>
                </div>

                <a class="navbar-item" href="https://gitee.com">
                    <img src="https://gitee.com/logo-black.svg?20171024">
                </a>
                <div class="navbar-item">
                    <p class="control">
                        <input class="input" type="text" placeholder="code here">
                    </p>
                    <p class="control">
                        <button class="button">
                            Search
                        </button>
                    </p>
                </div>
            </div>

            <!-- <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        <a class="button is-primary">
                            <strong>Sign up</strong>
                        </a>
                        <a class="button is-light">
                            Log in
                        </a>
                    </div>
                </div>
            </div> -->
            <p class="control">
                <a href="" class="button">
                    <span class="icon"></span>
                    <span>Apple</span>
                </a>
            </p>

        </div>
    </nav>

    <!-- level -->
    <nav class="level">
        <!-- <div class="level-left">level-left</div>
        <div class="level-right">level-right</div> -->
        <div class="level-item has-text-centered">
            <div>
                <!-- <i class="fas fa-eye"></i> -->
                <p class="heading">3,456K</p>
                <p class="title">IOS</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">12389</p>
                <p class="title">Flutter</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">456K</p>
                <p class="title">Bulma</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">7890</p>
                <p class="title">Swift</p>
            </div>
        </div>
    </nav>

    <nav class="level is-primary">
        <!-- <div class="level-left">level-left</div>
            <div class="level-right">level-right</div> -->
        <div class="level-item has-text-centered">
            <div>
                <!-- <i class="fas fa-eye"></i> -->
                <p class="heading">3,456K</p>
                <p class="title">Now</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">12389</p>
                <p class="title">Sublime</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">456K</p>
                <p class="title">VS Code</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">7890</p>
                <p class="title">Dart</p>
            </div>
        </div>
        <div class="level-item has-text-centered">
            <div>
                <p class="heading">7890</p>
                <p class="title">Graphql</p>
            </div>
        </div>
    </nav>

    <section class="section">
        <div class="tile id-ancestor">

            <div class="tile is-5">111</div>
            <div class="tile">222</div>
        </div>
    </section>

    <!-- section 部分-->
    <section class="section is-medium is-large">
        <div class="container">
            <h1 class="title">Section</h1>
            <h2 class="subtitle">
                A simple container to divide your page into <strong>sections</strong>, like the one you're currently
                reading
            </h2>
        </div>
    </section>

    <!-- hero 英雄-->
    <section class="hero is-primary is-fullheight">
        <div class="hero-head">hero-head</div>
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    Primary Things Are Learning、Study And To Life.
                </h1>
                <h2 class="subtitle">
                    Learning Flow Life.
                </h2>
            </div>
        </div>
        <div class="hero-foot">hero-foot</div>
    </section>

    <!-- <div class="container">
        <div class="notification">
            This container is <strong>centered</strong> on desktop.
            <a href="https://swift.org"><img src="https://swift.org/assets/images/swift.svg"></a>
            <a href="https://flutter.io"><img src="https://flutter.io/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb7ad42688a7fdaea1270ccf6bbf4f34b7e03f.svg"></a>
        </div> -->

    <!-- <nav class="panel">
        <p class="panel-heading">IOS</p>
    </nav>

    <div class="columns">
        <div class="column">
          First column
        </div>
        <div class="column">
          Second column
        </div>
        <div class="column">
          Third column
        </div>
        <div class="column">
          Fourth column
        </div>
      </div>
    </div> -->

    <!-- footer  页脚-->
    <footer class="footer">
        <div class="content has-text-centered">
            <p>
                <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
                <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
                is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
            </p>
        </div>
    </footer>
</body>

</html>